<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Bigcat管理主页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" href="./src/ico.ico">
  <link rel="apple-touch-icon-precomposed" href="./src/ico.ico">
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="assets/css/admin.css">
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="./css/clock.css">
</head>
<style>
  .demoItem {
    position: relative;
    width: 100px;
    height: 20px;
    margin: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .animation1 .shape {
    display: inline-block;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    opacity: 0.5;
  }

  .animation1 .shape-1 {
    background-color: #1875E5;
    animation: AnimationShape1 1.5s ease infinite;
  }

  .animation1 .shape-2 {
    background-color: #C5523F;
    animation: AnimationShape1 1.5s ease infinite 0.5s;
  }

  .animation1 .shape-3 {
    background-color: #499255;
    animation: AnimationShape1 1.5s ease infinite 0.8s;
  }

  .animation1 .shape-4 {
    background-color: #F2B736;
    animation: AnimationShape1 1.5s ease infinite 1s;
  }

  @keyframes AnimationShape1 {
    0% {
      transfrom: scale(1);
      opacity: 0.5;
    }

    50% {
      transform: scale(1.5);
      opacity: 1;
    }

    100% {
      transfrom: scale(0.5);
      opacity: 0.5;
    }
  }

  /* animation2 */
  .animation2 .con {
    width: 30px;
    height: 30px;
    position: relative;
  }

  .animation2 .shape {
    position: absolute;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    top: 40%;
  }

  .animation2 .shape-1 {
    background-color: #1875E5;
    animation: AnimationShape2 1s ease infinite;
  }

  .animation2 .shape-2 {

    left: 10px;
    background-color: #C5523F;
  }

  .animation2 .shape-3 {
    left: 20px;
    background-color: #499255;
  }

  .animation2 .shape-4 {
    background-color: #F2B736;
    left: 30px;
    animation: AnimationShape3 1s ease infinite;
  }

  @keyframes AnimationShape2 {
    0% {
      left: -15px;
      top: 5px;
    }

    25% {
      left: 0;
      top: 40%;
    }

    50% {
      left: 0;
      top: 40%;
    }

    75% {
      left: 0;
      top: 40%;
    }

    100% {
      left: -15px;
      top: 5px;
    }
  }

  @keyframes AnimationShape3 {
    0% {
      left: 30px;
      top: 40%;
    }

    25% {
      left: 30px;
      top: 40%;
    }

    50% {
      left: 45px;
      top: 5px;
    }

    75% {
      left: 30px;
      top: 40%;
    }

    100% {
      left: 30px;
      top: 40%;
    }
  }
</style>

<body data-type="index">


<header class="am-topbar am-topbar-inverse admin-header">
  <div class="am-topbar-brand">
    <a class="tpl-logo">
      <img src="./src/ico.ico" alt="" class="catImg">
    </a>
  </div>
  <div class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">

  </div>

  <button
      class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
      data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span>
    <span
        class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

    <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>

      </li>
      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="am-icon-comment-o"></span> 消息 <span
            class="am-badge tpl-badge-danger am-round">0</span></span>
        </a>
        <!-- <ul class="am-dropdown-content tpl-dropdown-content">
            <li class="tpl-dropdown-content-external">
                <h3>你有 <span class="tpl-color-danger">9</span> 条新消息</h3><a href="###">全部</a>
            </li>
            <li>
                <a href="#" class="tpl-dropdown-content-message">
                    <span class="tpl-dropdown-content-photo">
                        <img src="assets/img/user02.png" alt=""> </span>
                    <span class="tpl-dropdown-content-subject">
                        <span class="tpl-dropdown-content-from"> 小早苗 </span>
                        <span class="tpl-dropdown-content-time">10分钟前 </span>
                    </span>
                    <span class="tpl-dropdown-content-font"> Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资源；Amaze
                        UI 的成长，则离不开用户的支持。 </span>
                </a>
                <a href="#" class="tpl-dropdown-content-message">
                    <span class="tpl-dropdown-content-photo">
                        <img src="assets/img/user03.png" alt=""> </span>
                    <span class="tpl-dropdown-content-subject">
                        <span class="tpl-dropdown-content-from"> Steam </span>
                        <span class="tpl-dropdown-content-time">18分钟前</span>
                    </span>
                    <span class="tpl-dropdown-content-font"> 为了能最准确的传达所描述的问题， 建议你在反馈时附上演示，方便我们理解。 </span>
                </a>
            </li>

        </ul> -->
      </li>
      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="am-icon-calendar"></span> 进度 <span
            class="am-badge tpl-badge-primary am-round">0</span></span>
        </a>
        <ul class="am-dropdown-content tpl-dropdown-content">
          <li class="tpl-dropdown-content-external">
            <h3>你有 <span class="tpl-color-primary">4</span> 个任务进度</h3><a href="###">全部</a>
          </li>
          <li>
            <a href="javascript:;" class="tpl-dropdown-content-progress">
                                <span class="task">
                                    <span class="desc">v1.2 </span>
                                    <span class="percent">45%</span>
                                </span>
              <span class="progress">
                                    <div
                                        class="am-progress tpl-progress am-progress-striped">
                                        <div
                                            class="am-progress-bar am-progress-bar-success"
                                            style="width:45%"></div>
                                    </div>
                                </span>
            </a>
          </li>
          <li>
            <a href="javascript:;" class="tpl-dropdown-content-progress">
                                <span class="task">
                                    <span class="desc">内容页 </span>
                                    <span class="percent">30%</span>
                                </span>
              <span class="progress">
                                    <div
                                        class="am-progress tpl-progress am-progress-striped">
                                        <div
                                            class="am-progress-bar am-progress-bar-secondary"
                                            style="width:30%"></div>
                                    </div>
                                </span>
            </a>
          </li>
          <li>
            <a href="javascript:;" class="tpl-dropdown-content-progress">
                                <span class="task">
                                    <span class="desc">管理中心 </span>
                                    <span class="percent">60%</span>
                                </span>
              <span class="progress">
                                    <div
                                        class="am-progress tpl-progress am-progress-striped">
                                        <div
                                            class="am-progress-bar am-progress-bar-warning"
                                            style="width:60%"></div>
                                    </div>
                                </span>
            </a>
          </li>

        </ul>
      </li>

      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="tpl-header-list-user-nick">小早苗</span><span
            class="tpl-header-list-user-ico"> <img
            src="./src/ico.ico"></span>
        </a>
        <ul class="am-dropdown-content">
          <li><a href="#"><span class="am-icon-bell-o"></span> 资料</a></li>
          <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
          <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
        </ul>
      </li>
      <li><a href="###" class="tpl-header-list-link"><span
          class="am-icon-sign-out tpl-header-list-ico-out-size"></span></a></li>
    </ul>
  </div>
</header>


<div class="tpl-page-container tpl-page-header-fixed">


  <div class="tpl-left-nav tpl-left-nav-hover">
    <div class="tpl-left-nav-title">
      列表
    </div>
    <div class="tpl-left-nav-list">
      <ul class="tpl-left-nav-menu">
        <li class="tpl-left-nav-item">
          <a href="index.html" class="nav-link active">
            <i class="am-icon-home"></i>
            <span>首页</span>
          </a>
        </li>
        <li class="tpl-left-nav-item">
          <a href="peopleList.html" class="nav-link tpl-left-nav-link-list">
            <i class="am-icon-bar-chart"></i>
            <span>各部成员</span>
            <!-- <i class="tpl-left-nav-content tpl-badge-danger">
                12
            </i> -->
          </a>
        </li>

        <li class="tpl-left-nav-item">
          <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
            <i class="am-icon-table"></i>
            <span>部落战</span>
            <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
          </a>
          <ul class="tpl-left-nav-sub-menu">
            <li>
              <a href="currentwar.html">
                <i class="am-icon-angle-right"></i>
                <span>当前部落战情况</span>
                <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
              </a>

              <a href="warlog.html">
                <i class="am-icon-angle-right"></i>
                <span>历史部落战统计</span>

              </a>
            </li>
          </ul>
        </li>

        <li class="tpl-left-nav-item">
          <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
            <i class="am-icon-wpforms"></i>
            <span>联赛</span>
            <i
                class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
          </a>
          <ul class="tpl-left-nav-sub-menu" style="display: none;">
            <li>
              <a href="./leaguegroup.html">
                <i class="am-icon-angle-right"></i>
                <span>当前联赛情况</span>
                <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
              </a>

              <a href="./leaguegroupLog.html">
                <i class="am-icon-angle-right"></i>
                <span>历史联赛统计</span>
              </a>
            </li>
          </ul>
        </li>

        <!-- <li class="tpl-left-nav-item">
            <a href="login.html" class="nav-link tpl-left-nav-link-list">
                <i class="am-icon-key"></i>
                <span>登录</span>

            </a>
        </li> -->
      </ul>
    </div>
  </div>


  <div class="tpl-content-wrapper">
    <div class="clock">
      <!-- 表盘 -->
      <div class="board">
        <div></div>
      </div>
      <div class="number"></div>
      <div class="pointers">
        <div class="h"></div>
        <div class="m"></div>
        <div class="s"></div>
      </div>
      <div class="dot"></div>
    </div>
    <div class="tpl-content-page-title">
      欢迎来到Bigcat～
    </div>

    <ol class="am-breadcrumb">
      <li><a href="#" class="am-icon-home">首页</a></li>
      <li><a href="#">菜单</a></li>
      <li class="am-active">内容</li>
    </ol>
    <div class="tpl-content-scope">
      <div class="note note-info">

        <h3>Bigcat 为快乐而生
          <span class="close" data-close="note"></span>
        </h3>
        <p>猛虎不怯敌，烈士无需言。</p>
        <p>
          部落专注冲击高联赛杯段，部落战连开，没空打部落战者挂红牌。欢迎11、12本玩家加入我们。另有二营Bigcat||（10级部落）招收9本以上玩家，三营Bigcat|||招收7本以上玩家，四营树海之森招收爱种树的玩家，常驻请加首领微信bigcat73，会拉进大群。
        </p>
        <p><span class="label label-danger">注意:</span> 积极捐兵，不做伸手党。
        </p>
      </div>
    </div>

    <div class="row">
      <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
        <div class="dashboard-stat blue">
          <div class="visual">
            <i class="am-icon-bar-chart-o"></i>
          </div>
          <div class="details">
            <div class="number"> 部落战</div>
            <div class="desc"> 安排</div>
          </div>
          <a class="more" href="./currentwar.html"> 查看更多
            <i class="m-icon-swapright m-icon-white"></i>
          </a>
        </div>
      </div>
      <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
        <div class="dashboard-stat red">
          <div class="visual">
            <i class="am-icon-bar-chart-o"></i>
          </div>
          <div class="details">
            <div class="number"> 联赛</div>
            <div class="desc"> 安排</div>
          </div>
          <a class="more" href="./leaguegroup.html"> 查看更多
            <i class="m-icon-swapright m-icon-white"></i>
          </a>
        </div>
      </div>
      <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
        <div class="dashboard-stat green">
          <div class="visual">
            <i class="am-icon-bar-chart-o"></i>
          </div>
          <div class="details">
            <div class="number"> 人员</div>
            <div class="desc"> 管理</div>
          </div>
          <a class="more" href="./peopleList.html"> 查看更多
            <i class="m-icon-swapright m-icon-white"></i>
          </a>
        </div>
      </div>
      <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
        <div class="dashboard-stat purple">
          <div class="visual">
            <i class="am-icon-bar-chart-o"></i>
          </div>
          <div class="details">
            <div class="number"> 活动</div>
            <div class="desc"> 查询</div>
          </div>
          <a class="more" href="#"> 查看更多
            <i class="m-icon-swapright m-icon-white"></i>
          </a>
        </div>
      </div>


    </div>

    <div class="row">
      <div class="am-u-md-12 am-u-sm-12 row-mb">
        <div class="tpl-portlet">
          <div class="tpl-portlet-title">
            <div class="tpl-caption font-red ">
              <i class="am-icon-bar-chart"></i>
              <span>本部-捐兵之星</span>
            </div>
            <div class="actions">
              <ul class="actions-btn">
                <li class="purple-on">昨天</li>
                <li class="green">前天</li>
                <li class="dark">本周</li>
              </ul>
            </div>
          </div>
          <div class="tpl-scrollable">
            <div class="number-stats">
              <div class="stat-number am-fl am-u-md-6">
                <div class="title am-text-right"> 最高捐兵数</div>
                <div class="number am-text-right am-text-warning max-donations"> 0</div>
              </div>
              <div class="stat-number am-fr am-u-md-6">
                <div class="title"> 最低捐兵数</div>
                <div class="number am-text-success min-donations"> 0</div>
              </div>

            </div>

            <table class="am-table tpl-table">
              <thead>
              <tr class="tpl-table-uppercase">
                <th>人员</th>
                <th>捐</th>
                <th>收</th>
                <th>捐收比</th>
              </tr>
              </thead>
              <tbody class="myTable">

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="am-u-md-12 am-u-sm-12 row-mb">
        <div class="tpl-portlet">
          <div class="tpl-portlet-title">
            <div class="tpl-caption font-red ">
              <i class="am-icon-bar-chart"></i>
              <span>Bigcat Ⅱ-捐兵之星</span>
            </div>
            <div class="actions">
              <ul class="actions-btn">
                <li class="purple-on">昨天</li>
                <li class="green">前天</li>
                <li class="dark">本周</li>
              </ul>
            </div>
          </div>
          <div class="tpl-scrollable">
            <div class="number-stats">
              <div class="stat-number am-fl am-u-md-6">
                <div class="title am-text-right"> 最高捐兵数</div>
                <div class="number am-text-right am-text-warning max-donations2"> 0</div>
              </div>
              <div class="stat-number am-fr am-u-md-6">
                <div class="title"> 最低捐兵数</div>
                <div class="number am-text-success min-donations2"> 0</div>
              </div>

            </div>

            <table class="am-table tpl-table">
              <thead>
              <tr class="tpl-table-uppercase">
                <th>人员</th>
                <th>捐</th>
                <th>收</th>
                <th>捐收比</th>
              </tr>
              </thead>
              <tbody class="myTable2">

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="am-u-md-12 am-u-sm-12 row-mb">
        <div class="tpl-portlet">
          <div class="tpl-portlet-title">
            <div class="tpl-caption font-red ">
              <i class="am-icon-bar-chart"></i>
              <span>Bigcat Ⅲ-捐兵之星</span>
            </div>
            <div class="actions">
              <ul class="actions-btn">
                <li class="purple-on">昨天</li>
                <li class="green">前天</li>
                <li class="dark">本周</li>
              </ul>
            </div>
          </div>
          <div class="tpl-scrollable">
            <div class="number-stats">
              <div class="stat-number am-fl am-u-md-6">
                <div class="title am-text-right"> 最高捐兵数</div>
                <div class="number am-text-right am-text-warning max-donations3"> 0</div>
              </div>
              <div class="stat-number am-fr am-u-md-6">
                <div class="title"> 最低捐兵数</div>
                <div class="number am-text-success min-donations3"> 0</div>
              </div>

            </div>

            <table class="am-table tpl-table">
              <thead>
              <tr class="tpl-table-uppercase">
                <th>人员</th>
                <th>捐</th>
                <th>收</th>
                <th>捐收比</th>
              </tr>
              </thead>
              <tbody class="myTable3">

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="am-u-md-12 am-u-sm-12 row-mb">
        <div class="tpl-portlet">
          <div class="tpl-portlet-title">
            <div class="tpl-caption font-red ">
              <i class="am-icon-bar-chart"></i>
              <span>树海之森-捐兵之星</span>
            </div>
            <div class="actions">
              <ul class="actions-btn">
                <li class="purple-on">昨天</li>
                <li class="green">前天</li>
                <li class="dark">本周</li>
              </ul>
            </div>
          </div>
          <div class="tpl-scrollable">
            <div class="number-stats">
              <div class="stat-number am-fl am-u-md-6">
                <div class="title am-text-right"> 最高捐兵数</div>
                <div class="number am-text-right am-text-warning max-donations4"> 0</div>
              </div>
              <div class="stat-number am-fr am-u-md-6">
                <div class="title"> 最低捐兵数</div>
                <div class="number am-text-success min-donations4"> 0</div>
              </div>

            </div>

            <table class="am-table tpl-table">
              <thead>
              <tr class="tpl-table-uppercase">
                <th>人员</th>
                <th>捐</th>
                <th>收</th>
                <th>捐收比</th>
              </tr>
              </thead>
              <tbody class="myTable4">

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>


<script src="./js/forRange.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/iscroll.js"></script>
<script src="assets/js/app.js"></script>
<script src="./js/key.js"></script>
<script>
  const myAllUrl = allUrl + 'getRenYuan.php';
  range( myAllUrl, $( '.myTable' )
      .eq( 0 ), $( '.max-donations' ), $( '.min-donations' ), '8CRUGCRU' );
  range( myAllUrl, $( '.myTable2' )
      .eq( 0 ), $( '.max-donations2' ), $( '.min-donations2' ), '28YOOP9V2' );
  range( myAllUrl, $( '.myTable3' )
      .eq( 0 ), $( '.max-donations3' ), $( '.min-donations3' ), '28U9CQCQU' );
  range( myAllUrl, $( '.myTable4' )
      .eq( 0 ), $( '.max-donations4' ), $( '.min-donations4' ), '289J0JRJV' );

  function range( url, table, maxDonations, minDonations, tag ) {
    $.ajax( {
      url: url,
      type: 'GET',
      success: getMessage,
      data: {
        "tag": tag
      },
      error: function ( e ) {
        console.log( e.status, e.statusText );//状态码和信息
        table.html( '失败，请尝试刷新..............' );
      },
      beforeSend: function () {
        table.html( '<div class="demoItem animation2"><div class="con"><div class="shape shape-1"></div><div class="shape shape-2"></div><div class="shape shape-3"></div><div class="shape shape-4"></div></div></div>' );
      }
    } )

    function getMessage( datas ) {
      let data = JSON.parse( datas );
      let myData = data.items;
      let arrDonations = [];
      let arrDif = [];
      let arrDifIndex = [];
      myData.forEach( function ( ele, index ) {
        arrDonations.push( ele.donations + '.' + index );
        let dif = ( ele.donations / ele.donationsReceived ).toFixed( 2 );
        let arr = [];
        arr.push( dif );
        arr.push( index );
        ele.donations != 0 && ele.donationsReceived != 0 ? arrDif.push( arr ) : 0;
      } )
      arrDonations.sort( function ( a, b ) { return b - a } );
      let first = arrDonations[0].split( '.' )[1];
      maxDonations.html( arrDonations[0].split( '.' )[0] );
      minDonations.html( arrDonations[arrDonations.length - 1].split( '.' )[0] );
      let second = arrDonations[1].split( '.' )[1];
      let third = arrDonations[2].split( '.' )[1];

      arrDif.sort( function ( a, b ) { return b[0] - a[0] } );
      try {
        let dip1 = arrDif[arrDif.length - 1][1];
        let dip2 = arrDif[arrDif.length - 2][1];
        let dip3 = arrDif[arrDif.length - 3][1];

        let myStr = put( first, second, third, dip1, dip2, dip3, myData );
        table.html( myStr );
      } catch {
        table.html( '捐兵人太少啦，不评比了！' );
      }
    }

    function put( first, second, third, dip1, dip2, dip3, data ) {
      let str = '';
      let dif1 = ( data[first].donations / data[first].donationsReceived ).toFixed( 2 );
      str += '<tr><td><img src="./img/top1.png" alt="" class="user-pic"> ' + data[first].name + '</td><td>' + data[first].donations + '</td><td>' + data[first].donationsReceived + '</td><td class="font-green bold">' + dif1 + ' : 1</td></tr>';
      let dif2 = ( data[second].donations / data[second].donationsReceived ).toFixed( 2 );
      str += '<tr><td><img src="./img/top2.png" alt="" class="user-pic"> ' + data[second].name + '</td><td>' + data[second].donations + '</td><td>' + data[second].donationsReceived + '</td><td class="font-green bold">' + dif2 + ' : 1</td></tr>';
      let dif3 = ( data[third].donations / data[third].donationsReceived ).toFixed( 2 );
      str += '<tr><td><img src="./img/top3.png" alt="" class="user-pic"> ' + data[third].name + '</td><td>' + data[third].donations + '</td><td>' + data[third].donationsReceived + '</td><td class="font-green bold">' + dif3 + ' : 1</td></tr>';
      str += '<tr><td></td><td></td><td></td><td></td></tr>';
      let dif4 = ( data[dip1].donations / data[dip1].donationsReceived ).toFixed( 2 );
      str += '<tr><td><img src="./img/dip.png" alt="" class="user-pic"> ' + data[dip1].name + '</td><td>' + data[dip1].donations + '</td><td>' + data[dip1].donationsReceived + '</td><td class="font-green bold">' + dif4 + ' : 1</td></tr>';
      let dif5 = ( data[dip2].donations / data[dip2].donationsReceived ).toFixed( 2 );
      str += '<tr><td><img src="./img/dip.png" alt="" class="user-pic"> ' + data[dip2].name + '</td><td>' + data[dip2].donations + '</td><td>' + data[dip2].donationsReceived + '</td><td class="font-green bold">' + dif5 + ' : 1</td></tr>';
      let dif6 = ( data[dip3].donations / data[dip3].donationsReceived ).toFixed( 2 );
      str += '<tr><td><img src="./img/dip.png" alt="" class="user-pic"> ' + data[dip3].name + '</td><td>' + data[dip3].donations + '</td><td>' + data[dip3].donationsReceived + '</td><td class="font-green bold">' + dif6 + ' : 1</td></tr>';
      return str;
    }
  }

  $( '.catImg' ).on( 'click', function () {
    $( '.tpl-content-wrapper' )
        .hasClass( 'tpl-content-wrapper-hover' ) ? $( '.tpl-content-wrapper' )
        .removeClass( 'tpl-content-wrapper-hover' ) + $( '.tpl-left-nav' )
        .css( { display: 'block' } ) : $( '.tpl-content-wrapper' )
        .addClass( 'tpl-content-wrapper-hover' ) + $( '.tpl-left-nav' )
        .css( { display: 'none' } );
  } )
</script>
<script src="./js/clock.js"></script>
</body>

</html>
